<template>
	<div id="app" style="height: 100%;">
		<el-container style="height: 100%;padding: 10px;">
			<el-header style="height: 7vh;">
				| 星海游鲸
			</el-header>
			<el-container>
				<!-- <el-header v-if="isMobile" style="height: 8vh;padding: 0vh;overflow: auto;">
					<router-link class="routerHerf" v-for="(item,index) in routerlist" :to="item.path" :key="index">
						{{ item.name }}
					</router-link>
				</el-header> -->
				<el-aside v-if="!isMobile" style="width: auto;height: 91vh;overflow: auto;">
					<router-link v-for="(item,index) in routerlist" :to="item.path" :key="index" class="routerHerf">
						{{ item.name }}
						<br /><br />
					</router-link>
				</el-aside>
				<el-main style="height: 91vh; padding: 2vw;overflow: auto;">
					<router-view></router-view>
					<div class="bottom">
						一语子©2021 ICP证：浙ICP备2021022880号
					</div>
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<script>
	import Vue from 'vue'
	import {
		spineRoutersList
	} from '@/router/index.js'

	export default {
		name: 'app',
		components: {

		},
		data() {
			return {
				routerlist: [],
				isMobile: false,
				btnsize: "mini",
			}
		},
		mounted() {
			this._isMobile();
			this.getRouterList();
		},
		methods: {
			getRouterList() {
				this.routerlist = spineRoutersList;
				// console.log(this.routerlist);
			},

			_isMobile() {
				this.isMobile = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				);
				this.btnsize = this.isMobile ? "mini" : "";
			}
		}
	}
</script>

<style scoped>
	.el-container {
	
	}
	
	.el-main {
		/* background-image: url(/img/1506.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: 100vh; */

	}

	.el-header {
		font-size: 4vh;
		color: #62bdec;
		/* text-align: center; */
		overflow: hidden;
		border-radius: 10px 10px 0px 0px;
		border: 5px solid #c0deee;
		text-shadow: #c0deee 2px 2px 2px;
		/* box-shadow: 0 6px 4px rgba(192, 222, 238, 0.1), 0 0 6px rgba(192, 222, 238, 0.0); */
	}

	.el-footer {
		/* background-color: #47aeea; */
		color: #47aeea;
		text-align: center;
		overflow: hidden;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}

	.el-main,
	.el-aside {
		border: 5px solid #c0deee;
		/* box-shadow: 0 6px 4px rgba(192, 222, 238, 0.1), 0 0 6px rgba(192, 222, 238, 0.0); */
	}

	.el-aside {
		padding: 2vw;
		border-radius: 0px 0px 0px 10px;
	}

	.el-main {
		color: #333;
		border-radius: 0px 0px 10px 0px;
	}

	.el-main::-webkit-scrollbar {
		border-width: 1px;
	}

	.routerHerf {
		color: #98b6c5;
		font-size: 2vh;
		margin: 5px;
		text-decoration: none;
	}

	.routerHerf:hover {
		color: #62bdec;
		/* text-shadow:#c0deee 2px 2px 2px */
	}

	.router-link-active,
	.routerHerf:active {
		color: #62bdec;
		/* 阴影颜色 距离字左 距离字右 阴影模糊程度 */
		text-shadow: #c0deee 2px 2px 2px
	}

	.bottom {
		font-size: 1vh;
		position: absolute;
		bottom: 1vh;
		left: 80%;
		transform: translate(-50%, -50%);
	}
</style>
